<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script	type="text/javascript">
	/**
	*	1.在文档加载完毕时发送请求，获取到所有省份，添加到<select name="province">元素中
	*	2.在选择新的省份时，发送请求(参数为省份名称)，得到xml文档，即<province>元素
	*		解析xml，得到其中所有的<city>,再得到其中的内容,即市名，使用市名生成<option> 加入到<selcet>元素中.
	*/
	//创建异步对象
	function createXMLHttpRequest(){
		try {
			return new XMLHttpRequest();//非IE浏览器
		} catch (e) {
				try {
					return new ActiveXObject("Msxml2.XMLHTTP");//IE6.0
				} catch (e) {
						try {
							return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5
						} catch (e) {
							alert("哥们，你用的是什么浏览器！");
							throw e;
						}
				}
		}
	}
window.onload = function(){
		/*
		第一件事情：
		ajax四步，请求ProvinceServlet,得到省份名称
		使用每个省份名称创建一个<option>,添加到<select name="province">中
		*/
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open('GET',"<c:url value='/ProvinceServlet'/>",true);
		xmlHttp.send(null);
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				//获取服务器的响应
				var text = xmlHttp.responseText;
				//使用逗号分隔它，得到数组
				var arr = text.split(",");
				//循环遍历每个省份的名称，每个名称生成一个<option>对象，添加到<select>中
				for(var i=0;i<arr.length;i++){
					var op = document.createElement("option");//创建一个指定名称的元素
					op.value = arr[i];//设置op值为当前省份名称
					var textNode = document.createTextNode(arr[i]);//创建文本节点
					op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
					document.getElementById("p").appendChild(op);
				}
			}
		};
		
		/*
			第二件事：
			给<select name="province">添加改变监听
			使用选择的省份名称去请求CityServlet，得到<province>元素(xml元素)！！！
			获取每个<province>元素中所有的<city>元素，遍历之！获取每个<city>元素中的文本内容，即市名称
			使用市名去创建<option>元素,添加到<select name="city">
		*/
		var proSelect = document.getElementById("p");
		proSelect.onchange = function(){
			var xmlHttp = createXMLHttpRequest();
			xmlHttp.open('POST',"<c:url value='/CityServlet'/>",true);
			xmlHttp.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
			xmlHttp.send("pname="+proSelect.value);//把下拉列表中选择的值发送给服务器
			xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				/*
					把select中option移除（除了请选择以外）
				*/
				//把op添加到<select name="city">中
				var citySelect = document.getElementById("c");
				//获得其子元素
				var optionEleList = citySelect.getElementsByTagName("option");
				//遍历循环每个option元素,然后再citySelect中移除
				while(optionEleList.length>1){//子元素的个数如果大于1就循环，等于1就不循环！
					citySelect.removeChild(optionEleList[1]);//移除了第一个，第二个就变成第一个了
				}
				
					var doc = xmlHttp.responseXML; //得到<province>元素
					var cityEleList = doc.getElementsByTagName("city");//获取每个<province>元素中所有的<city>元素
					for(var i=0;i<cityEleList.length;i++){
						var cityEle = cityEleList[i];//得到每个city元素
						if(window.addEventListener){//处理浏览器的差异，获取市名称
							var cityName = cityEle.textContent;//其他浏览器
							
						}else{
							var cityName = cityEle.text;//IE浏览器
						}
						var op = document.createElement("option");
						op.value = cityName;
						//创建文本节点
						var textNode = document.createTextNode(cityName);
						op.appendChild(textNode); //把文本节点追加到op中，指定其显示值
						
						citySelect.appendChild(op);
					}
				}
			};
		};
	};
</script>
</head>
<body>
	<h1>省市级联动</h1>
	<select name="province" id="p">
		<option>== 请选择省  ==</option>
	</select>
	&nbsp;&nbsp;&nbsp;&nbsp;										                
	<select name="city" id="c">
		<option>== 请选择市  ==</option>
	</select>
</body>
</html>